<template>
  <div class="app-container">
    <div class="demo-image">
      <el-row>
        <el-col v-for="item in list" :key="item.thumb" :span="4">
          <div class="block" style="height:176px" @mouseenter="enter(item)" @mouseleave="leave(item)">
            <el-image
              style="max-width: 100%;max-height:98% "
              :src="item.thumb"
              fit="contain"
              :preview-src-list="[item.picture]"
            />
            <div class="demonstration">
              <span>{{ item.add_time | format }}</span>
              <el-link
                v-show="item.showdel"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="remove(item)"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="listQuery.page"
        :page-size="listQuery.pagesize"
        @current-change="current_change"
      />
    </div>
  </div>
</template>

<script>
import { list, del } from '@/api/alerts'
import moment from 'moment'
export default {
  filters: {
    format(date) {
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data() {
    return {
      interval: undefined,
      listQuery: {
        page: 1,
        pagesize: 24,
        deviceId: undefined,
        channelId: undefined
      },
      list: null,
      total: 0, // 记录数量
      listLoading: true
    }
  },
  created() {
    this.listQuery.page = 1
    this.listQuery.deviceId = this.$route.query.deviceId
    this.listQuery.channelId = this.$route.query.channelId
    this.fetchData()
    const me = this
    this.interval = setInterval(function() {
      me.fetchData()
    }, 60 * 1000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    fetchData() {
      this.listLoading = true
      list(this.listQuery).then(response => {
        this.list = response.data.items

        this.srcList = []
        this.list.forEach((v) => {
          this.srcList.push(v.picture)
        })
        this.listLoading = false
        this.total = response.data.total
      })
    },
    current_change: function(page) {
      this.listQuery.page = page
      this.fetchData()
    },
    enter(item) {
      // item.showdel=true
      this.$set(item, 'showdel', true)
      console.log('item.showdel=true', item.id, item.showdel)
    },
    leave(item) {
      // item.showdel=false
      this.$set(item, 'showdel', false)
      console.log('item.showdel=false', item.id, item.showdel)
    },
    remove(item) {
      this.$confirm('确认删除此图片？').then(_ => {
        this.listLoading = true
        del({ id: item.id }).then(ret => {
          this.listLoading = false
          this.$notify({
            title: 'Success',
            message: ret.message,
            type: 'success',
            duration: 2000
          })
          this.fetchData()
        }).catch(err => {
          console.error(err)
        })
      }).catch(_ => {

      })
    }
  }
}
</script>
<style scoped>
    div.block{text-align:center;margin-top:5px;margin-bottom:5px}
    .demonstration{font-size:0.8rem}
</style>
